<template>
    <div class="user-info">
        <el-avatar class="avatar" icon="el-icon-user-solid" :src="avatar" :size="size"></el-avatar>
        <span class="name">{{ name }}</span>
    </div>
</template>

<script>
export default {
    name: "user-info",
    props: {
        avatar: {
            type: String,
            default() {
                return "";
            },
        },
        name: {
            type: String,
            default() {
                return "";
            },
        },
        size: {
            type: [Number,String],
            default(){
                return 32;
            }
        }
    },
};
</script>

<style lang="scss" scoped>
.user-info {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    > .avatar {
        flex-shrink: 0;
        margin-right: 10px;
    }
    > .name {
        flex: 1;
    }
}
</style>